<script setup>
import { ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

// 列表数据
const listData = [
  { id: 1, area: "渝中区", score: 100 },
  { id: 2, area: "江北区", score: 99 },
  { id: 3, area: "渝北区", score: 98 },
  { id: 4, area: "万州区", score: 90 },
  { id: 5, area: "长寿区", score: 88 },
  { id: 6, area: "忠县", score: 88 },
];

// 分离前三名和其他数据
const topThree = ref(listData.slice(0, 3));
const otherData = ref(listData.slice(3));



// 获取排名颜色
const getRankColor = (id) => {
  switch (id) {
    case 1:
      return "#FFB800";
    case 2:
      return "#40CFF6";
    case 3:
      return "#00FF7F";
    default:
      return "#fff";
  }
};

// 获取背景色
const getBackgroundColor = (id) => {
  switch (id) {
    case 1:
      return "rgba(216, 173, 78, 0.3)";
    case 2:
      return "rgba(73, 174, 230, 0.3)";
    case 3:
      return "rgba(39, 218, 182, 0.3)";
    default:
      return "transparent";
  }
};
</script>

<template>
  <div class="test-index">
    <div class="list">
      <div class="header">
        <div class="col">序号</div>
        <div class="col">责任单位</div>
        <div class="col">数据资源接入率</div>
      </div>
      <div class="content">
        <!-- 固定的前三名 -->
        <div
          v-for="item in topThree"
          :key="`top-${item.id}`"
          class="row"
          :style="{
            background: getBackgroundColor(item.id),
            color: getRankColor(item.id),
          }"
        >
          <div class="col">{{ item.id }}</div>
          <div class="col">{{ item.area }}</div>
          <div class="col">{{ item.score }}</div>
        </div>

        <!-- 滚动部分 -->
        <div class="scroll-container" v-if="listData.length > 5">
          <vue3-seamless-scroll
            :list="otherData"
            :step="0.1"
            class="scroll-wrapper"
            hover-stop
          >
            <div
              v-for="item in otherData"
              :key="`scroll-${item.id}`"
              class="row"
              :style="{
                background: getBackgroundColor(item.id),
                color: getRankColor(item.id),
              }"
            >
              <div class="col">{{ item.id }}</div>
              <div class="col">{{ item.area }}</div>
              <div class="col">{{ item.score }}</div>
            </div>
          </vue3-seamless-scroll>
        </div>

        <!-- 非滚动时的静态显示 -->
        <template v-else>
          <div
            v-for="item in otherData"
            :key="`static-${item.id}`"
            class="row"
            :style="{
              background: getBackgroundColor(item.id),
              color: getRankColor(item.id),
            }"
          >
            <div class="col">{{ item.id }}</div>
            <div class="col">{{ item.area }}</div>
            <div class="col">{{ item.score }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.test-index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: cover;
  margin-top: 10px;

  .list {
    width: 460px;
    height: 260px;
    color: #fff;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      height: 40px;
      background: #0b485f;
      margin-bottom: 9px;

      .col {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }

    .content {
      flex: 1;
      overflow: hidden;
      position: relative;

      // 固定的前三行
      > .row {
        display: flex;
        height: 43px;
        width: 100%;
        margin-bottom: 1px;
        position: relative;
        z-index: 2;

        .col {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
        }

        &:hover {
          filter: brightness(1.2);
          background: rgba(64, 207, 246, 0.1) !important;
        }
      }

      // 滚动容器
      .scroll-container {
        position: absolute;
        top: 132px;
        left: 0;
        width: 100%;
        height: calc(100% - 132px);
        overflow: hidden;

        .scroll-wrapper {
          width: 100%;
          height: 100%;
          // 添加过渡效果使滚动更平滑
          transition: transform 0.3s ease-in-out;

          .row {
            display: flex;
            height: 43px;
            width: 100%;
            margin-bottom: 1px;

            .col {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
            }

            &:hover {
              filter: brightness(1.2);
              background: rgba(64, 207, 246, 0.1) !important;
            }
          }
        }
      }
    }
  }
}
</style>
